<template>
	<view>
		<view class="zdy">
			<view class="calendar-button" type="button" @click="open">
				<image src="/static/day.png" mode=""></image>
				<view class="zdyz">自定义</view>
			</view>
			<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date"
				:insert="info.insert" :lunar="info.lunar" :startDate="info.startDate" :endDate="info.endDate"
				:range="info.range" @confirm="confirm" />
			<!--  @close="close" -->
		</view>



		<view class="info">
			<view class="day">
				<view class="today" :class="select == 0 ? 'sel': ''" @click="changeT" v-show="day">
					今天
				</view>
				<view class="yesterday" :class="select == 1 ? 'sel': ''" @click="changeY" v-show="day">
					昨天
				</view>
			</view>

			<view class="zdyDay" :class="" v-show="zdyDay">
				<view v-if="num" class="two">{{startDate}} - {{endDate}}</view>
				<view v-if="!num" class="one">{{startDate}}</view>
			</view>

			<view class="mid">
				<view class="income">
					<view class="mon">￥{{Takein}}</view>
					<view class="sr">收入</view>
				</view>
				<view class="order">
					<view class="num">{{OrderCount}}</view>
					<view class="ddl">订单量</view>
				</view>
			</view>
			<view class="circle">
				<view class="title">
					收入分布
				</view>
				<view class="charts-box">
					<qiun-data-charts type="pie" :opts="opts" :chartData="chartData2" />
				</view>
			</view>
			<view class="column">
				<view class="title">
					订单分布
				</view>
				<view class="charts-box">
					<qiun-data-charts type="column" :chartData="chartData" />
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	/**
	 * 获取任意时间
	 */
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}


	export default {
		data() {
			return {
				MerchantId: '1',
				OrderCount: "0",
				Takein: 0,
				CurrentDate: '',
				// 今天昨天选项
				day: true,
				// 自定义日期
				zdyDay: false,
				zdy: '',
				Ddata: [],
				fulldate:'',
				len: 0,
				num: false, //大于1 true  小1 false
				startDate: '',
				endDate: '',
				select: 0,
				// 秋云
				chartData: {
					categories: ["维修", "保养", "洗车"],
					series: [{
						name: "订单量",
						data: [345, 145, 230]
					}]
				},
				chartData2: {},
				opts: {
					color: ["#FB8E0B", "#1D6FFF"]
				},

				showCalendar: false,
				info: {
					lunar: true,
					range: true,
					insert: false
				}
			}
		},
		mounted() {
			this.changeT();
		},
		onReady() {
			// 秋云
			this.getServerData();
			this.getServerData2();
		},
		methods: {
			open() {
				this.$refs.calendar.open()
			},
			getServerData(responseData) {
				console.log(responseData)
				// 模拟从服务器获取数据时的延时
				setTimeout(() => {
					if (!Array.isArray(responseData)) {
						console.error('Response data is not an array:', responseData);
						return;
					}
					const services = [];
					const orderCounts = [];
					const names = [];
					const incomes = [];
					for (const item of responseData) {
						services.push(item.service);

						orderCounts.push(item.count)
					}
					let res = {
						categories: services,
						series: [{
							name: "订单量",
							data: orderCounts
						}]
					};

					this.chartData = res; // 更新 chartData
				}, 100);
			},
			getServerData2(responseData) {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					if (!Array.isArray(responseData)) {
						console.error('Response data is not an array:', responseData);
						return;
					}
					const names = [];
					const incomes = [];
					for (const item of responseData) {
						names.push(item.name);
						incomes.push(parseFloat(item.value))
					}
					// 将数据格式化为饼图所需的格式
					const formattedData = names.map((name, index) => ({
						name: name,
						value: incomes[index]
					}));
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res2 = {
						series: [{
							data: formattedData
						}]
					};
					this.chartData2 = JSON.parse(JSON.stringify(res2));
				}, 100);
			},
			changeY() {
				this.yesterday();
				// 昨天
				this.select = 1;
				uni.request({
					url: 'http://localhost:7000/business/census/' + this.MerchantId + '/' + this.$data.CurrentDate,
					method: 'GET',
					header: {
						authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImZlN2MyMDE3LTU2ZDctNDc2NS04NTM4LWE0NjgyMDg4OGJkZiIsInVzZXJuYW1lIjoiYWRtaW4ifQ.cUbkBxYDHvf_Rvof1K3YRXtZmv9KQY6L8NGs2tKAYaMDb3i7FYqqHBqN8jmsB4GUr2MHyTXYTjNSZ_Fp_sGqzQ',
					},
					success: (res) => {
						this.Takein = res.data.takein
						this.OrderCount = res.data.orderCount
					}
				});
				uni.request({
					url: 'http://localhost:7000/business/census/type/' + this.MerchantId + '/' + this.$data.CurrentDate,
					method: 'GET',
					header: {
						authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImZlN2MyMDE3LTU2ZDctNDc2NS04NTM4LWE0NjgyMDg4OGJkZiIsInVzZXJuYW1lIjoiYWRtaW4ifQ.cUbkBxYDHvf_Rvof1K3YRXtZmv9KQY6L8NGs2tKAYaMDb3i7FYqqHBqN8jmsB4GUr2MHyTXYTjNSZ_Fp_sGqzQ',
						'Content-Type': 'application/json'
					},
					success: (res) => {
						const responseData = res.data;
						this.getServerData(responseData); // 使用后端数据更新模拟数据
						this.getServerData2(responseData)
					}
				});
			},
			changeT() {
				// 今天
				this.nowDate();
				this.select = 0;
				uni.request({
					url: 'http://localhost:7000/business/census/' + this.MerchantId + '/' +this.$data.CurrentDate, // 请求的 URL
					method: 'GET',
					header: {
						authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImZlN2MyMDE3LTU2ZDctNDc2NS04NTM4LWE0NjgyMDg4OGJkZiIsInVzZXJuYW1lIjoiYWRtaW4ifQ.cUbkBxYDHvf_Rvof1K3YRXtZmv9KQY6L8NGs2tKAYaMDb3i7FYqqHBqN8jmsB4GUr2MHyTXYTjNSZ_Fp_sGqzQ',
					},
					success: (res) => {
						this.Takein = res.data.takein
						this.OrderCount = res.data.orderCount
					}
				});
				uni.request({
					url: 'http://localhost:7000/business/census/type/' + this.MerchantId + '/' + this.$data.CurrentDate,
					method: 'GET',
					header: {
						authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImZlN2MyMDE3LTU2ZDctNDc2NS04NTM4LWE0NjgyMDg4OGJkZiIsInVzZXJuYW1lIjoiYWRtaW4ifQ.cUbkBxYDHvf_Rvof1K3YRXtZmv9KQY6L8NGs2tKAYaMDb3i7FYqqHBqN8jmsB4GUr2MHyTXYTjNSZ_Fp_sGqzQ',
						'Content-Type': 'application/json'
					},
					success: (res) => {
						const responseData = res.data;
						this.getServerData(responseData); // 使用后端数据更新模拟数据
						this.getServerData2(responseData)
					}
				});
			},
			nowDate() {
				// 当前日期
				const now = new Date();
				const year = now.getFullYear();
				const month = ('0' + (now.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以加1，并格式化为两位数
				const day = ('0' + now.getDate()).slice(-2); // 格式化天为两位数
				this.CurrentDate = `${year}-${month}-${day}`
				console.log(this.CurrentDate)
			},
			yesterday() {
				// 日期
				const now = new Date();
				const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000); // 减去一天
				const year = yesterday.getFullYear();
				const month = ('0' + (yesterday.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以加1，并格式化为两位数
				const day = ('0' + yesterday.getDate()).slice(-2); // 格式化天为两位数
				this.CurrentDate = `${year}-${month}-${day}`;
				console.log(this.CurrentDate)
			},
			confirm(e) {
				this.day = false
				this.zdyDay = true
				this.fulldate=e.fulldate
				console.log(e.fulldate)
				uni.request({
					url: 'http://localhost:7000/business/census/' + this.MerchantId + '/' +this.$data.fulldate, // 请求的 URL
					method: 'GET',
					header: {
						authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImZlN2MyMDE3LTU2ZDctNDc2NS04NTM4LWE0NjgyMDg4OGJkZiIsInVzZXJuYW1lIjoiYWRtaW4ifQ.cUbkBxYDHvf_Rvof1K3YRXtZmv9KQY6L8NGs2tKAYaMDb3i7FYqqHBqN8jmsB4GUr2MHyTXYTjNSZ_Fp_sGqzQ',
					},
					success: (res) => {
						this.Takein = res.data.takein
						this.OrderCount = res.data.orderCount
					}
				});
				uni.request({
					url: 'http://localhost:7000/business/census/type/' + this.MerchantId + '/' + this.$data.fulldate,
					method: 'GET',
					header: {
						authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImZlN2MyMDE3LTU2ZDctNDc2NS04NTM4LWE0NjgyMDg4OGJkZiIsInVzZXJuYW1lIjoiYWRtaW4ifQ.cUbkBxYDHvf_Rvof1K3YRXtZmv9KQY6L8NGs2tKAYaMDb3i7FYqqHBqN8jmsB4GUr2MHyTXYTjNSZ_Fp_sGqzQ',
						'Content-Type': 'application/json'
					},
					success: (res) => {
						const responseData = res.data;
						this.getServerData(responseData); // 使用后端数据更新模拟数据
						this.getServerData2(responseData)
					}
				});
				
				
				
				
				
				
				
				
				
				
				
				
				
				this.len = e.range.data.length;
				console.log('this.len', this.len)
				console.log('e.range', e.range.data.length)
				this.startDate = this.Ddata[0];
				if (this.len > 1) {
					// var i = this.Ddata.length;
					var j = this.len - 1;
					this.endDate = this.Ddata[j];
					// console.log('endDate 返回:', this.endDate);
					this.num = true
				} else if (this.len == 0) {
					this.startDate = e.range.before
					// console.log('startDate 返回:', this.startDate);
					this.num = false
				}
			}

		}
	};
</script>

<style>
	.calendar-button {
		flex: 1;
		font-weight: bold;
		font-size: 32rpx;
		display: flex;
		margin-top: 30rpx;
		margin-bottom: 10rpx;
	}

	/* 自定义 */
	.zdy {
		margin-left: 600rpx;
	}

	.zdy image {
		width: 42rpx;
		height: 42rpx;
	}

	.zdy .zdyz {
		font-size: 28rpx;
		color: #0D7AF7;
		line-height: 44rpx;
		font-weight: bold;
		padding-left: 6rpx;
	}

	/* tab切换 */
	.info {
		position: relative;
	}

	.two {
		/* position: absolute; */
		font-size: 34rpx;
		font-weight: bold;
	}

	.one {

		font-size: 34rpx;
		font-weight: bold;
	}

	.zdyDay {
		width: 440rpx;
		/* position: absolute; */
		text-align: center;
		line-height: 70rpx;
		/* color: #168FFF; */
		margin: auto;
	}

	.day {
		display: flex;
		text-align: center;
		line-height: 70rpx;
		color: #168FFF;
		margin-left: 210rpx;
		margin-top: 20rpx;
	}

	.day>.today {
		border: 1px solid #0084FF;
		width: 160rpx;
		height: 70rpx;
	}

	.sel {
		color: #ffffff;
		background-color: #0084FF;
	}

	.day>.yesterday {
		border: 1px solid #0084FF;
		width: 160rpx;
		height: 70rpx;
	}

	/* 收入 订单量 */
	.mid {
		display: flex;
	}

	.income {
		width: 374rpx;
		height: 182rpx;
		text-align: center;
	}

	.income>.mon {
		font-size: 36rpx;
		color: #1D6FFF;
		font-weight: bold;
		padding-top: 38rpx;
	}

	.income>.sr {
		font-size: 28rpx;
		font-weight: bold;
	}

	.order {
		width: 374rpx;
		height: 182rpx;
		text-align: center;
	}

	.order>.num {
		font-size: 36rpx;
		color: #54BCBD;
		font-weight: bold;
		padding-top: 38rpx;
	}

	.order>.ddl {
		font-size: 28rpx;
		font-weight: bold;
	}

	/* 图表标题 */
	.circle {
		position: relative;
	}

	.circle>.title {
		position: absolute;
		font-size: 32rpx;
		color: #101010;
		margin-top: 18rpx;
		margin-left: 50rpx;
		font-weight: bold;
		top: -30rpx;
	}

	.column {
		position: relative;
	}

	.column>.title {
		position: absolute;
		top: -90rpx;
		margin-top: 18rpx;
		margin-left: 30rpx;
		font-size: 32rpx;
		color: #101010;
		font-weight: bold;
	}


	/* 秋云 */
	.charts-box {
		width: 90%;
		height: 300px;
		margin-top: 50rpx;
		margin-left: 50rpx;
	}
</style>